<template>
    <div class="zh-student-leave">
        <nav-header></nav-header>
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <!-- <div class="open-width" style="width: 120px">
                        <el-select v-model="grade_id" filterable placeholder="请选择">
                            <el-option
                                v-for="item in gradeData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div> -->
                    <div class="open-width" style="width: 120px">
                        <el-select v-model="leave_type" filterable placeholder="请选择">
                            <el-option
                                v-for="(item, index) in statusOptons"
                                :key="index"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="open-width" style="width: 270px">
                        <el-input v-model="keyword" placeholder="请输入老师姓名、账号搜索" @kyeup.enter.native="searchFunc"></el-input>
                    </div>
                    <el-button type="primary" @click="searchFunc">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                </div>
            </div>
            <div class="zh-table-contents">
                <el-table
                    :data="listData"
                    border
                    max-height="600"
                    style="width: 100%">
                    <el-table-column
                        type="index"
                        :index="typeIndex"
                        label="序号"
                        align="center"
                        show-overflow-tooltip
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="用户名"
                        align="center"
                        show-overflow-tooltip
                        >
                    </el-table-column>
                    <el-table-column
                        prop="number"
                        label="账号"
                        align="center"
                        show-overflow-tooltip
                        >
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="申请时间"
                        align="center"
                        show-overflow-tooltip
                        >
                    </el-table-column>
                    <el-table-column
                        prop="start_time"
                        label="请假开始时间"
                        align="center"
                        show-overflow-tooltip
                        >
                    </el-table-column>
                    <el-table-column
                        prop="end_time"
                        label="请假结束时间"
                        align="center"
                        show-overflow-tooltip
                        >
                    </el-table-column>
                    <el-table-column
                        prop="date_type"
                        label="请假状态"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="5"
                        label="操作"
                        align="center"
                        width="150"
                        show-overflow-tooltip
                        >
                        <template slot-scope="scope">
                            <el-button @click="lookOver(scope.row.id)" type="text">查看</el-button>
                            <template v-if="parseInt(scope.row.status) === 2 && checkAuth(scope.row)">
                                <el-button @click="change_confirm(scope.row, 2)" type="text">批准</el-button>
                                <el-button @click="change_confirm(scope.row, 7)" type="text">拒绝</el-button>
                            </template>
                            <template v-if="(parseInt(scope.row.status) === 1 || parseInt(scope.row.status) === 3)&& checkAuth(scope.row)">
                                    <el-button @click="change_confirm(scope.row, 6)" type="text" class="delete-button">删除</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination" v-show="total_number > 10">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="listParam.page_index"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.page_size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total_number">
                    </el-pagination>
                    <div class="pagination-button">
                        <el-button
                            @click="getList"
                            type="primary" icon="el-icon-refresh"
                            circle title="刷新数据" size="mini" >
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                gradeData:[],
                listParam:{
                    grade_id:0,
                    leave_type:0,
                    keyword: '',
                    data_type:1,
                    page_index:1,
                                page_size:10,
                                origin: 1
                },
                grade_id:0,
                leave_type:0,
                keyword: '',
                listData:[],
                total_number:0,
                statusOptons: [{
                    value:0 ,
                    label: '全部状态'
                },{
                    value: '1',
                    label: '已批准'
                }, {
                    value: '3',
                    label: '已拒绝'
                }, {
                    value: '2',
                    label: '未审批'
                }],
                approveParam:{
                    leaveid:0,
                    status:0,
                    reason_content:'',
                },
                approveStatusArr:{2:'批准',6:'删除',7:'拒绝'}
            }
        },
        created(){
            // this.getGrade();
            this.getList();
        },
        methods: {
            searchFunc(){
                this.listParam.grade_id = this.grade_id;
                this.listParam.leave_type = this.leave_type;
                this.listParam.keyword = this.keyword;
                this.listParam.page_index = 1;
                this.getList();
            },
            reset() {
                this.grade_id = 0;
                this.leave_type = 0;
                this.keyword = '';
                this.listParam = {
                    grade_id:0,
                    leave_type:0,
                    keyword: '',
                    data_type:1,
                    page_index:1,
                    page_size:10,
                    origin: 1
                }
                this.getList();
            },
            lookOver(id){
                this.$router.push('/affairs/leave/leave-details/'+id)
            },
            // 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
            },
                //root 对所有请假做操作
                //超级管理员 对所有请假做操作
                //普通管理员 对应指定的批假人才能操作
            /**
             * 
             */
            checkAuth(obj){
                if([1, 2].includes(this.$g.user_id) || +obj.approve_id === this.$g.user_id) {
                    return true;
                }

                return false;
            },
            getList(){
                let success = (data=>{
                    this.listData = data.data.data;
                    this.total_number = data.data.data_sum;
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('api/leave/manage_leave_list',{params: this.listParam,func:{success:success}})
            },
            getGrade(){
                // 重写成功回调
                let success = ( data => {
                    this.gradeData = data.data;
                    this.gradeData.unshift({id:0,name:'全部年级'})
                });
                this.$ajax.get('api/org/all_grade',{params:{},func:{success:success}})
            },
            change_confirm(obj, status){
                let yes = ( data => {
                    this.approveParam.status = status;
                    this.approveParam.leaveid = obj.id

                    if( parseInt(status) === 7 ){
                        this.$prompt('请输入拒绝理由', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(({ value }) => {
                            if( is_empty(value) ){
                                this.$message.warning('请输入拒绝理由');
                                pass = false;
                            }else{
                                this.approveParam.reason_content = value;
                                this.change(this.approveParam, status);
                            }
                        }).catch(() => {

                        });
                    }else{
                        this.change(this.approveParam, status);
                    }
                })
                let cancel = ( data => {})

                this.e_confirm({yes: yes, cancel: cancel, txt: '确定' + this.approveStatusArr[parseInt(status)] + ' ' + obj.name + ' 的这条请假申请吗？'});
            },
            change(param, status){
                let success = ( data => {
                    this.$message.success(data.msg);

                    if (status === 6) {
                        if (this.listData.length - this.rowLen === 0) {
                            if (this.listParam.page_index > 1) {
                                this.listParam.page_index-- ;
                            } else {
                                this.listParam.page_index = 1;
                            }
                        }
                    }

                    this.getList();
                });

                this.$ajax.put('api/leave/leave', param, {func:{success:success}})
            },
                handleSizeChange(val) {
                this.listParam.page_index = 1;
                this.listParam.page_size = val;
                this.getList()
            },
            handleCurrentChange(val) {
                this.listParam.page_index = val;
                this.getList();
            },
        },
    }
</script>
<style lang="scss">
	.zh-student-leave {
		.el-table__body-wrapper table tbody {
			td:nth-child(10) {
				padding: 0;
			}
		}
	}
</style>
